<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
    <script src="./JS/jQuery.min.js"></script>
</head>

<body style="padding: 15px;">
    <!-- 添加图书面板 -->
    <div class="panel panel-primary">
        <!-- <div class="panel-heading">
            <h3 class="panel-title">添加新图书</h3>
        </div>
        <div class="panel-body form-inline">
            <div class="input-group">
                <div class="input-group-addon">书名</div>
                <input type="text" class="form-control" id="iptBookname" placeholder="请输入书名">
            </div>
            <div class="input-group">
                <div class="input-group-addon">作者</div>
                <input type="text" class="form-control" id="iptAuthor" placeholder="请输入作者">
            </div>
            <div class="input-group">
                <div class="input-group-addon">出版社</div>
                <input type="text" class="form-control" id="iptPublisher" placeholder="请输入出版社">
            </div> -->
        <button id="btnAdd" class="btn btn-primary" data-bs-toggle="modal" data-bs-target=".addmodal">添加</button>
    </div>
    </div>

    <!-- 图书表格 -->

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">
            <!-- <tr>
                <td>12</td>
                <td>12</td>
                <td>12</td>
                <td>12</td>
                <td>
                    <a href="javascript:;" class="del" style="color: red;">删除</a>
                    <a href="javascript:;" class="edit" style="color: rgb(0, 47, 255);">编辑</a>
                </td>
            </tr> -->
        </tbody>
    </table>

    <!-- 弹出新增模态框 -->
    <div class="modal addmodal" tabindex="-1">
        <div class="modal-dialog">
            <!-- 弹框内容 -->
            <div class="modal-content">
                <!-- 弹框头部 -->
                <div class="modal-header">
                    <h5 class="modal-title">新增图书</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <!-- 弹框身体 -->
                <div class="modal-body">
                    <form class="add-form">
                        <div class="mb-3">
                            <label for="bookname" class="form-label">书名</label>
                            <input type="text" class="form-control bookname" placeholder="请输入书籍名称" name="bookname">
                        </div>
                        <div class="mb-3">
                            <label for="author" class="form-label">作者</label>
                            <input type="text" class="form-control author" placeholder="请输入作者名称" name="author">
                        </div>
                        <div class="mb-3">
                            <label for="publisher" class="form-label">出版社</label>
                            <input type="text" class="form-control publisher" placeholder="请输入出版社名称" name="publisher">
                        </div>
                    </form>
                </div>
                <!-- 弹框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary save-btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js"></script>

    <script>
        $(function () {
            const creator = '小李'
            function getBookslist() {
                $.ajax({
                    type: 'GET', // 请求方式 如：GET POST
                    url: 'http://hmajax.itheima.net/api/books', // 请求的url地址
                    data: {
                        bookname:'',
                        author: '',
                        publisher: '',
                        // 外号 获取对应得数据
                        creator: '小李'
                        // creator
                    },
                    // 获取成功
                    success: res => {
                        console.log(res);
                        const bookList = res.data
                        // console.log(bookList);

                        let rows = []
                        // map 遍历数组 
                        $.each(bookList, (item, index) => {
                            // console.log(item);
                            // console.log(index);
                            // 数组追加
                            rows.push(`
                            <tr>
                <td>${item + 1}</td>
                <td>${index.bookname}</td>
                <td>${index.author}</td>
                <td>${index.publisher}</td>
                <td>
                    <a href="javascript:;" class="del" style="color: red;">删除</a>
                    <a href="javascript:;" class="edit" style="color: rgb(0, 47, 255);">编辑</a>
                </td>
            </tr>
                            `)
                        }).join('')
                        // 把内容追加到页面 数组转字符串
                        $('#tb').append(rows)
                        // console.log(rows.join(''));

                    },
                    // 获取失败
                    error: fail => {
                        console.log(fail);
                    }
                })

            }
            // 调用函数
            getBookslist()

            // 创建弹框对象
            const addMode = new bootstrap.Modal($('.addmodal'))
            $('.save-btn').on('click', () => {
                // 获取form表单
                const value = $('form').serializeArray()
                let dataa = {}
                $.each(value, (index, item) => {
                    console.log(index)
                    console.log(item)
                    dataa[item.name] = item.value;
                });
                // json 对象
                console.log(dataa);
                const bookObj = dataa.join('')
                // 获取表单里面的值 去空格
                let Bookname = $('.bookname').val().trim()
                let Author = $('.author').val().trim()
                let Publisher = $('.form-label').val().trim()
                // 提交服务器
                $.ajax({
                    type: 'post',
                    url: 'http://hmajax.itheima.net/api/books',
                    data: {
                        ...bookObj,
                        // bookname: Bookname,
                        // author: Author,
                        // publisher: Publisher,
                        // dataa,
                        creator: '312'
                    },
                    success: res => {
                        console.log(res);
                        // 添加成功后重新请求渲染
                        getBookslist()
                        // 重置表单 DOM原生对象
                        $('form')[0].reset()
                        // 隐藏
                        addMode.hide()
                    },
                    error: dali => {
                        console.log('获取失败');
                    }
                })
            })

            // 删除图书 
            
        })
    </script>


</body>

</html>